<template>
    <div>
        <a-button type="primary" @click="showAddModal = true" style="margin-bottom: 12px;">新增外键</a-button>
        <a-table :columns="columns" :data-source="foreignKeyData" :pagination="false" row-key="_rowKey">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex === 'name'">
                    <a-input v-model:value="record.name" placeholder="外键名" />
                </template>
                <template v-if="column.dataIndex === 'column'">
                    <a-select v-model:value="record.column" style="width: 100%">
                        <a-select-option v-for="field in fields" :key="field.column_name" :value="field.column_name">
                            {{ field.column_name }}
                        </a-select-option>
                    </a-select>
                </template>
                <template v-if="column.dataIndex === 'reference_table'">
                    <a-input v-model:value="record.reference_table" placeholder="引用表" />
                </template>
                <template v-if="column.dataIndex === 'reference_column'">
                    <a-input v-model:value="record.reference_column" placeholder="引用字段" />
                </template>
                <template v-if="column.dataIndex === 'on_delete'">
                    <a-select v-model:value="record.on_delete" style="width: 100%">
                        <a-select-option value="CASCADE">CASCADE</a-select-option>
                        <a-select-option value="SET NULL">SET NULL</a-select-option>
                        <a-select-option value="RESTRICT">RESTRICT</a-select-option>
                        <a-select-option value="NO ACTION">NO ACTION</a-select-option>
                    </a-select>
                </template>
                <template v-if="column.dataIndex === 'on_update'">
                    <a-select v-model:value="record.on_update" style="width: 100%">
                        <a-select-option value="CASCADE">CASCADE</a-select-option>
                        <a-select-option value="SET NULL">SET NULL</a-select-option>
                        <a-select-option value="RESTRICT">RESTRICT</a-select-option>
                        <a-select-option value="NO ACTION">NO ACTION</a-select-option>
                    </a-select>
                </template>
                <template v-if="column.dataIndex === 'actions'">
                    <a-space>
                        <a-button type="link" danger @click="removeRow(index)">删除</a-button>
                        <a-button v-if="index === foreignKeyData.length - 1" type="link" @click="addRow">新增</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>
        <a-modal v-model:open="showAddModal" title="新增外键" @ok="handleAddForeignKey" @cancel="resetAddForm">
            <a-form :model="addForm">
                <a-form-item label="字段">
                    <a-input v-model:value="addForm.column_name" />
                </a-form-item>
                <a-form-item label="被引用的模式">
                    <a-input v-model:value="addForm.referenced_schema" />
                </a-form-item>
                <a-form-item label="被引用的表">
                    <a-input v-model:value="addForm.referenced_table" />
                </a-form-item>
                <a-form-item label="被引用的字段">
                    <a-input v-model:value="addForm.referenced_column" />
                </a-form-item>
                <a-form-item label="删除时">
                    <a-input v-model:value="addForm.on_delete" />
                </a-form-item>
                <a-form-item label="更新时">
                    <a-input v-model:value="addForm.on_update" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
    table_name: string
    fields: any[]
    foreign_keys?: any[]
}>()
const emits = defineEmits(['update:foreign_keys'])

const columns = [
    { title: '外键名', dataIndex: 'name' },
    { title: '字段', dataIndex: 'column' },
    { title: '引用表', dataIndex: 'reference_table' },
    { title: '引用字段', dataIndex: 'reference_column' },
    { title: '删除时', dataIndex: 'on_delete' },
    { title: '更新时', dataIndex: 'on_update' },
    { title: '操作', dataIndex: 'actions' }
]

const foreignKeyData = ref<any[]>([])

function addRow() {
    foreignKeyData.value.push({
        _rowKey: Date.now() + Math.random(),
        name: '',
        column: '',
        reference_table: '',
        reference_column: '',
        on_delete: 'RESTRICT',
        on_update: 'RESTRICT'
    })
}

function removeRow(index: number) {
    foreignKeyData.value.splice(index, 1)
    if (foreignKeyData.value.length === 0) {
        addRow()
    }
}

watch(
    () => props.foreign_keys,
    (foreign_keys) => {
        if (foreign_keys && foreign_keys.length > 0) {
            foreignKeyData.value = foreign_keys.map((f, idx) => ({ ...f, _rowKey: idx + '-' + Date.now() }))
        } else {
            foreignKeyData.value = []
            addRow()
        }
    },
    { immediate: true, deep: true }
)

watch(foreignKeyData, (val) => {
    emits('update:foreign_keys', val)
}, { deep: true })

const showAddModal = ref(false)
const addForm = ref({
    column_name: '',
    referenced_schema: '',
    referenced_table: '',
    referenced_column: '',
    on_delete: '',
    on_update: ''
})

function handleAddForeignKey() {
    const newFk = {
        ...addForm.value,
        column_field: '`' + addForm.value.column_name + '`'
    }
    foreignKeyData.value.push(newFk)
    resetAddForm()
}
function resetAddForm() {
    showAddModal.value = false
    addForm.value = {
        column_name: '',
        referenced_schema: '',
        referenced_table: '',
        referenced_column: '',
        on_delete: '',
        on_update: ''
    }
}
</script>
